import {Input, Tree} from 'antd'
import { useState,useEffect} from 'react';
import {getSystemOfficeTreeData} from '@/pages/Dashboard/System/Office/service'
import type { TreeProps } from 'antd/es/tree';
const { Search } = Input;
const OfficeSelect = (
    {
        setSelectedKeys
    }: {
        setSelectedKeys?:any;
    }
) => {
    const [searchValue, setSearchValue] = useState('')
    const [treeData, setTreeData] = useState<any[]>([]);

    // 请求部门树
    useEffect(() => {
        getOffficeTreeData()
    }, [searchValue])
    
    const onSelect: TreeProps['onSelect'] = (selectedKeys:any, info:any) => {
        // console.log('selected', selectedKeys, info);
        setSelectedKeys(selectedKeys)
    };

    const getOffficeTreeData = () => {
        getSystemOfficeTreeData()
            .then(res => {
                if(res.code===200) {
                    setTreeData(res.data)
                }
            })
    }
    const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const { value } = e.target;
        setSearchValue(value);
    };
    return (
        <div>
        <Search style={{ marginBottom: 8 }} placeholder="部门名称" onChange={onChange} />
        <Tree
          height={400}
          blockNode
          expandedKeys={['1']}
          fieldNames={{title:'label', key: 'value'}}
          onSelect={onSelect}
          treeData={treeData}
        />
      </div>
    )
}

export default OfficeSelect